<template>
  <div class="itemDate" v-if="itemDate">
    <img class="img" :src="itemDate.image.url" alt="">
    <div class="info">
      <div class="location">
        <div class="one text">
          <img class="iconImg" src="../../assets/img/home/location.png" alt="">
          {{ itemDate.location }}
        </div>
        <p class="p2">{{ itemDate.houseName }}</p>
        <div class="p3 text">
          {{ itemDate.summaryText }}
        </div>
        <div class="four">
          <div class="fl">
            ￥{{ itemDate.finalPrice }}
          </div>
          <div class="center">
            ￥{{ itemDate.productPrice }}
          </div>
          <div class="right" v-if="itemDate.priceTipBadge">
            {{ itemDate.priceTipBadge.text }}
          </div>
        </div>
      </div>
    </div>
</div>
</template>
<script setup>





const props = defineProps(['itemDate'])
</script>
<style lang="less" scoped>
.itemDate {
  width: 49%;
  margin: 7px 0;

  .img {
    width: 100%;
    border-radius: 5px;
    position: relative;
  }

  .location {
    padding: 8px 10px;

    .one {
      display: flex;
      align-items: center;

      .iconImg {
        width: 12px;
      }
    }

    .p2 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin: 8px 0;
    }

    .four {
      display: flex;
      margin: 8px 0;
      align-items: center;

      .fl {
        color: #ff9645;
        font-size: 14px;
      }

      .center {
        color: #999;
        font-size: 12px;
        text-decoration: line-through;
        margin: 0 3px;
      }

      .right {
        background-image: linear-gradient(270deg, #f66, #ff9f9f);
        color: #fff;
        padding: 0 6px;
        border-radius: 8px;
      }
    }

    .text {
      color: #666;
      font-size: 12px
    }
  }

}
</style>